import style from "./AssistantMessage.module.css";
import LoadingIcon from "../../assets/icons/loading.svg";
import AiIcon from "../../assets/icons/ai.svg";
import AssistantMessageContent from "./AssistantMessageContent";
import LoadingText from "../../assets/icons/loading-text.svg";

type AssistantMessageProps = {
  message: AssistantMessageInterface;
};

export default function AssistantMessage(props: AssistantMessageProps) {
  const { message } = props;
  const { content, graph, recommend, retrieval, done } = message;

  return (
    <div className={style.assistantMessage}>
      <div className={style.avatar}>
        <AiIcon height={28} width={28} />
      </div>
      {done ? (
        <AssistantMessageContent
          content={content}
          graph={graph}
          recommend={recommend}
          retrieval={retrieval}
        />
      ) : (
        <div className={style.loading}>
          <LoadingIcon height={40} width={40} />
          {/* <LoadingText className={style.loadingText} height={30} /> */}
        </div>
      )}
    </div>
  );
}
